<template>
    <a-form ref="formRef" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="告警代码" :rules="rules.code" name="code">
            <a-input v-model:value="form.code" :disabled="disabled" placeholder="请输入告警代码" />
        </a-form-item>
        <a-form-item label="告警英文名" :rules="rules.nameEs" name="nameEs">
            <a-input v-model:value="form.nameEs" placeholder="请输入告警英文名" />
        </a-form-item>
        <a-form-item label="告警名称" :rules="rules.name" name="name">
            <a-input v-model:value="form.name" placeholder="请输入告警名称" />
        </a-form-item>
        <a-form-item label="告警等级" :rules="rules.grade" name="grade">
            <dict-select v-model:value="form.grade" placeholder="请选择告警等级" dict-code="grade" />
        </a-form-item>
        <a-form-item label="解决方案" :rules="rules.solution" name="solution">
            <a-textarea v-model:value="form.solution" placeholder="请输入解决方案" :rows="3" />
        </a-form-item>
    </a-form>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import { useForm } from '@iframe/tools/mixins/FormMixins'
import { DictSelect } from '@iframe/tools/components'

const { validate, getForm, setForm } = useForm()
const formRef = ref()
const form = reactive({})

const rules = reactive({
    code: { required: true, message: '请输入告警代码' },
    nameEs: { required: true, message: '请输入告警英文名' },
    name: { required: true, message: '请输入告警名称' },
    grade: { required: true, message: '请选择告警等级' }
})

const disabled = computed(() => {
    return !!form.id
})

defineExpose({ validate: validate(formRef), getForm: getForm(form), setForm: setForm(form) })
</script>
